Web'de yenilikler

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Rachel Andrew

Yayınlanma tarihi: 20 Mayıs 2025

Google I/O 2025'te, web'deki yenilikler konulu konferansta Baseline'la ilgili tüm duyurular paylaşıldı ve bu yıl Baseline'a eklenen özelliklerden sadece bazılarına göz atıldı. Web ve Baseline için inanılmaz bir yıl oldu. Bu gönderi, daha fazla bilgi edinmek için tüm bağlantılarla birlikte bahsedilen her şeyin özetini içeriyor.

Web Platformu Kontrol Paneli ve web özellikleri

2024'te, web özellikleri veri kümesini kullanan ve Baseline'un parçası olan tüm özellikleri keşfetmenize olanak tanıyan Web Platformu Kontrol Paneli'nin ilk lansmanını duyurmuştuk.

Web özellikleri verileri artık tamamlandı ve platformun tüm özellikleri eşlendi. Her ay yeni özellikler temel çizgiye eklendikçe veriler güncellenir ve bunların tümü kontrol panelinde gösterilir.

Kendi referans hedefinizi keşfetmenize yardımcı olacak araçlar

Tarayıcı destek politikanızı, Birleşik Krallık'taki Clearleft ajansı gibi yaygın olarak kullanılan referans yıl hedefinin değişen değerine göre belirleyebilir veya referans yıla dayalı sabit bir hedef belirleyebilirsiniz. Artık kendinize en uygun hedefi belirlemek için web özellikleri verilerinin yanı sıra kendi kullanıcı verilerinizi de kullanabilirsiniz.

Geçen yıl I/O'da RUMvision'ın Baseline'ı kendi ürünlerine uygulayacağını duyurmuştuk. Bu entegrasyon artık kullanıma sunuldu.

RUM verilerinizi kullandığından, hangi referans yılını kullanacağınızı belirlemenize yardımcı olur. Bu belirleme, küresel ortalama yerine bu verilere dayanır. Ayrıca, geniş kapsamlı temel planın sizin için uygun olup olmadığını da görebilirsiniz.

Ayrıca, yeni Google Analytics Temel Hedef Denetleyici ile kullanıcılarınızın her bir temel hedefi ne kadar desteklediğini net bir şekilde görmek için Google Analytics verilerinizi kullanabilirsiniz.

Bunlar, gerçek kullanıcı verilerinizi referansla eşlemenize yardımcı olan ve giderek büyüyen bir araç koleksiyonundan yalnızca iki tanesidir.

Web DX Topluluk Grubu kısa süre önce, farklı Baseline yıllarına ve sitelerinizde yaygın olarak kullanıma sunulmuş olan Netlify uzantısını kullanıma sundu. Bu uzantı, derleme araçlarınızda neyi hedefleyeceğinize karar vermenize yardımcı olur. Cloudflare'ın Observatory RUM ürünü ve Contentsquare ile entegrasyonlar yakında kullanıma sunulacaktır.

Verileri kendi araçlarınızla entegre edin

Web özellikleri verileri açıktır ve kendi entegrasyonlarınız için kullanılabilir. Bu işlemin daha kolay yapılmasını sağlamaya çalışıyoruz.

Web Platform Dashboard API'yi kullanın veya web-features verilerini doğrudan npm paketinden tüketin.

Artık W3C WebDX Topluluk Grubu'ndaki baseline-browser-mapping modülünü kullanarak tarayıcı sürümlerini bir referans hedefiyle eşleyebilirsiniz. Bu modül, sunucu tarafı JavaScript ortamında veya günlük olarak depodan yenilenen JSON ya da CSV dosyalarını indirerek kullanılabilir.

Bu veriler yalnızca temel ana tarayıcı grubu için değil, Samsung Internet, Opera, UC Browser ve Android Webview gibi yayın tarayıcılarının da eşlemelerini içerir.

Özelliklerin referans hedefiniz tarafından desteklenip desteklenmediğini öğrenme

Temel bilgiler artık MDN ve Can I Use sayfalarının çoğunda yer alıyor. Bu bilgilere Web Platformu Kontrol Paneli'nde, web.dev ve CSS Tricks'deki makalelerde de ulaşabilirsiniz. Ancak tüm bu işlemler için destek almanız gerekir. Kod yazarken ve kullandığınız diğer tüm araçların bir parçası olarak Temel Bilgiler bilgilerinin IDE'nizde gösterilmesi çok daha yararlı olur.

Birçok önemli araçta artık yerleşik veya kolayca entegre edilmiş Temel Destek olduğunu paylaşmaktan heyecan duyuyoruz.

browserslist-config-baseline

Babel ve PostCSS gibi birçok araç, hangi tarayıcı sürümlerinin destekleneceğini belirlemek için browserslist'i kullanır.

Chrome ekibi, WebDX CG ve topluluk üyeleriyle birlikte browserslist-config-baseline adlı yeni bir aracın kullanıma sunulmasına yardımcı oldu. Bu sayede, browserslist hedeflerinizi yaygın olarak kullanılabilir veya temel yıl gibi temel terimlerle yapılandırabilirsiniz.

Bu sayede, browserslist hedefi alan tüm araçlar artık referans değer açısından ifade edilebilir.

Daha fazla bilgi için Referans değerini browserslist ile kullanma başlıklı makaleyi inceleyin.

Hata ayıklama araçlarındaki referans değer: ESLint ve Stylelint

Baseline'u linter'lerle kullanma, yakın zamanda CSS için ESLint ile başlayan linter alanındaki birkaç yeni araçla mümkün hale geldi.

Referans ESLint'te use-baseline kuralı vardır. Bu ayarı tercih ettiğiniz temel hedefe ayarlayabilirsiniz. Bu durumda, hedefinizden daha yeni özellikler kullandığınızda uyarı alırsınız. Bu uyarıları nasıl çözeceğinizi seçebilirsiniz: Bu özelliği ilkellerle değiştirerek veya linter uyarısını bastırarak. Örneğin, ilerici bir geliştirmeyse son teknoloji bir özelliği güvenli bir şekilde kullandığınızı biliyorsanız linter uyarısını bastırma seçeneği mükemmel bir çözümdür.

Desteklenmeyen tarayıcılar bunları zaten değerlendirmeyeceğinden, ESLint varsayılan olarak @supports bloklarında daha yeni özellikler kullanıldığı takdirde uyarı vermez.

HTML linting ihtiyaçlarınız için html-eslint adlı bir topluluk eklentisi de vardır.

Stylelint, stylelint-plugin-use-baseline adlı bir eklentiyi resmi olarak destekler. Bu kural, CSS için ESLint kuralıyla aynı şekilde çalışır ancak bunun yerine Stylelint'te çalışır.

Birçok linter'da IDE eklentileri de bulunur. Böylece, kod yazarken zikzak şeklindeki alt çizgiler aracılığıyla temel durum hakkında anında geri bildirim alabilirsiniz.

VS Code ve JetBrains WebStorm'da referans değer

Birçok IDE, uzun zamandır düzenleyicinizdeki bir özelliğin üzerine gelerek desteklenen tarayıcı sürümlerinin listesini görmeyi destekliyor.

Ancak bu özelliğin gerçekten güvenli olup olmadığını anlamak oldukça zor olabilir. Bu listede önemli bir tarayıcı eksik olup olmadığını ve bu tarayıcı sürümünün ne kadar yeni olduğunu zihinsel olarak analiz etmeniz gerekir.

Bu sorunu düzeltmek için, milyonlarca web geliştiricisinin kullandığı en popüler IDE olan VS Code ile iş ortaklığı yaparak temel verileri doğrudan bu fareyle üzerine gelme kartlarına entegre ettik.

Artık fareyle bir özelliğin üzerine geldiğinizde, özelliğin temel kabul edilip edilmediğini ve ne kadar süreyle geçerli olacağını ya da henüz tam olarak uygulamayan önemli tarayıcılar olup olmadığını öğrenebilirsiniz.

Desteklenen özellikler arasında CSS özellikleri, HTML öğeleri ve HTML özellikleri yer alır. Visual Studio Code artık temel çizgiyi destekliyor başlıklı makalede daha fazla bilgi edinebilirsiniz.

Bu entegrasyon, VS Code tabanlı tüm IDE'lerin de bu fareyle üzerine gelme kartlarından yararlanacağı anlamına gelir.

Ayrıca JetBrains'in WebStorm JavaScript ve TypeScript IDE'sine hovercard'ları uyguladığını da duyuruyoruz.

Web her zamankinden daha hızlı gelişiyor

Baseline'ın, birlikte çalışabilir web'in her zamankinden daha hızlı geliştiğinden yararlanmanıza yardımcı olacağını umuyoruz.

Google I/O 2024'ten bu yana son on iki ay içinde kullanıma sunulan ve temel özellik haline gelen tüm özellikleri görmek için Web Platformu Kontrol Paneli'ni kullanabilirsiniz.

Ayrıca, Interop 2025 projesine dahil oldukları için çok yakında Baseline Yeni'de kullanıma sunulacağından emin olabileceğiniz bir dizi özellik de var. Dahil edilen tüm özellikler hakkında Interop2025: another year of web platform improvements (Interop2025: web platformunda iyileştirmelerin bir yıl daha) başlıklı makalede okuyabilirsiniz.

Yan yazım modları

CSS writing-mode özelliği için sideways-rl ve sideways-lr değerlerinin, Temel yeni kullanıma sunuldu özelliğine dahil edildiğini gördük. Dikey yazma modunu yalnızca sayfa düzeni amacıyla kullanıyorsanız büyük olasılıkla yatay değerleri kullanmanız gerekir.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Sabitleme konumlandırması

Sabitleme alanı yerleşimi, Chrome 125'te kullanıma sunuldu. Örneğin, bir düğmeyle ipucu penceresi açarken bir öğenin konumunu bir sabitleme noktasına bağlamanıza olanak tanır.

Bu özellik artık Interop 2025'e dahil edildi. Bu nedenle, bu yıl Baseline'a ekleneceğini tahmin ediyoruz.

Core Web Vitals: LCP ve INP

LCP API

Event Timing API (INP için)

Web Verileri, sitenizin sunduğu deneyimi ölçmenize yardımcı olabilir ve siteyi geliştirme fırsatlarını saptayabilir. Web Vitals girişimi, genel durumu basitleştirmeyi ve sitelerin en önemli metriklere (Core Web Vitals) odaklanmasına yardımcı olmayı amaçlar.

Interop 2025, LargestContentfulPaint API'yi ve Event Timing API'yi tarayıcılarda uygulayarak Largest Contentful Paint (LCP) ve Interaction to Next Paint (INP) metriklerini içerir.

<details> öğesinde yapılan geliştirmeler

<details> öğesi zaten Temel Geniş kapsamlı olarak kullanılabilir durumdadır. <details> içeren açıklama widget'larını daha kullanışlı hale getiren çeşitli özellikler bulunduğundan Interop 2025'e dahil edilmiştir.

<details> öğesi, <details> öğesi daraltıldığında sayfada görünen bölüm olan bir <summary> öğesi içerir. <summary>, <details> öğesinin içeriğidir. Kullanıcı özeti tıklayana kadar bu içerik gizlidir.

Interop 2025 sırasında birlikte çalışabilir hale getirilen özelliklerden biri, içeriğin display yerine content-visibility kullanılarak gizlenmesidir. Yani, genişletilmediği takdirde içerik hiç oluşturulmaz.

::marker sözde öğesi de Interop 2025 çalışmasının bir parçasıdır. ::marker sözde öğesi, <summary> öğesinin açıklama üçgenini biçimlendirmenize olanak tanır.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Ardından başka bir sözde öğe: ::details-content.

::details-content, içeriği (ayrıntılar öğesinin genişleyen ve daralan ve stil uygulamanıza olanak tanıyan kısmı) temsil eder.

[open]::details-content {
  border: 5px dashed hotpink;
}

Ayrıca, sayfa içinde arama eşleşmeleriyle <details> öğesini otomatik olarak genişletme ve HTML hidden özelliğinin until-found değerini "Yeni kullanılabilir" referans değerine getirme gibi bazı güzel iyileştirmeler de yapıldı. Bu işlem, bir öğeyi tarayıcıda sayfa içinde arama özelliği kullanılarak bulunana veya bir URL parçası takip edilerek doğrudan gidilene kadar gizler.

CSS @scope

CSS @scope kuralı, seçicilerinizin erişimini sınırlamanıza olanak tanır. @scope ile kapsama kökü ayarlayarak, at-kuralı içine yerleştirilen tüm stil kuralları yalnızca söz konusu DOM ağacına uygulanır.

Örneğin, yalnızca .card sınıfına sahip bir öğenin içindeki <img> öğelerini hedeflemek istiyorsanız .card kapsamlandırma kökü olur.

@scope (.card) {
    img {
        border-color: green;
    }
}

CSS @scope at-kuralı ile seçicilerinizin erişimini sınırlama başlıklı makalede daha fazla bilgi edinin.

scrollend

Karmaşıklığı azaltan ve kaydırma arayüzlerini iyileştiren bir diğer özellik de scrollend'dir. scrollend etkinliği olmadan, kaydırma işleminin tamamlandığını algılamanın güvenilir bir yolu yoktur.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend etkinliği sayesinde tarayıcı, tüm bu zor değerlendirmeleri sizin için yapar.

document.onscrollend = event => {…}

Daha fazla örnek için Yeni bir JavaScript etkinliği olan Scrollend başlıklı makaleyi inceleyin.

Aynı doküman görünümünde geçişler

Son olarak, görüntü geçişleri Interop 2025'in bir parçasıdır. Çalışma, aynı belgedeki görüntü geçişlerini (yani tek sayfalı uygulamalar için olanları) ve görüntü geçişi sınıflarını içerir.

Yıl ilerledikçe projenin nasıl şekillendiğini görmek için Interop 2025 kontrol panelini takip edin.

Interop 2025'e dahil edilen özellikler bu yıl Baseline'a dahil edilecek tek özellikler olmayacak ancak bu özelliklerin projelere dahil edilmesi, bu özelliklerin öncelikli olduğunun ve yakında kullanıma sunulacağının iyi bir göstergesidir.

Daha yeni başlıyoruz

Baseline için heyecan verici bir yıl oldu. Geçen yılki duyurularımızdan bu yana çok yol kat ettik. Web özellikleri verilerinin doldurma işlemi tamamlandı. Bu, geliştirici araçlarının oluşturulmasına olanak tanıdı. Bu konuda yeni yeni çalışmaya başladık. Bu verilerden yararlanabilecek bir ürününüz veya açık kaynak aracınız varsa bizimle iletişime geçebilirsiniz.

Web'in sunduğu her şeyden yararlanmanıza yardımcı olacak eğitici içeriklerin yanı sıra yeni araçlarla ilgili duyuruları web.dev'de yayınlamaya devam edeceğiz.